<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-form ref="queryForm" :model="queryForm" label-width="80px" class="bg-white pd-12px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="异动学期:" :label-width="formLabelWidth">
              <el-select v-model="queryForm.grade">
                <el-option
                  v-for="item in options.grade"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="异动大类:" :label-width="formLabelWidth" @change="getAbnormalTypes">
              <el-select v-model="queryForm.classId">
                <el-option
                  v-for="item in options.abnormalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="异动类型" :label-width="formLabelWidth" prop="studentCategory">
              <el-select v-model="queryForm.typeId">
                <el-option
                  v-for="item in options.abnormalType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="float-right">
              <el-button @click="reset">{{ $t('message.reset') }}</el-button>
              <el-button type="primary" @click="getApplyAbnormalList">{{ $t('message.filter') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="edu-page-title mg-top">学籍异动列表</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-row class="border-bottom" style="height:56px;">
        <el-col :span="18">
          <div class="empty-box"/>
        </el-col>
        <el-col :span="6">
          <div class="float-right">
            <el-button type="primary" @click="applyAbnormal()">申请</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="applyNoramls"
        size="mini"
        ref="studentsTable"
        @selection-change="handlerSelectionChange"
      >
        <el-table-column type="selection" stripe/>
        <el-table-column label="异动学期">
          <template slot-scope="scope">{{ scope.row.grade }}</template>
        </el-table-column>
        <el-table-column label="异动大类名称">
          <template slot-scope="scope">{{ scope.row.className }}</template>
        </el-table-column>
        <el-table-column label="异动类型名称">
          <template slot-scope="scope">{{ scope.row.typeName }}</template>
        </el-table-column>
        <el-table-column label="申请时间">
          <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd') }}</template>
        </el-table-column>
        <el-table-column label="生效时间">
          <template slot-scope="scope">{{ scope.row.effectiveTime | formatDate('yyyy-MM-dd') }}</template>
        </el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="培养类别">
          <template slot-scope="scope">{{ scope.row.studentCategoryI18n }}</template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="viewDetail(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:10px 60px 0 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {mapState} from "vuex";
import * as API from 'common/src/api/abnormal'
//初始化
export default {
  name: 'applyAbnormalList',
  data() {
    const getGrade = (function() {
      const now = new Date().getFullYear()
      const years = []
      for (let i = 0; i < 6; i++) {
        years.push({
          label: now - i,
          value: now - i,
        })
      }
      return years
    })()
    return {
      loading: false,
      formLabelWidth: '100px',
      applyNoramls: [],
      totalCount: 0,
      queryForm: {
        grade: '',
        classId: '',
        typeId: '',
        pageNum_: 1,
        pageSize_: 20,
      },
      options: {
        abnormalList: [],
        grade: getGrade,
        abnormalType: []
      },
     
    }
  },
  mounted() {
    this.getOptions()
    this.getApplyAbnormalList() 
  },
  methods: {
    // 获取异动大类
    getOptions() {
      this.loading = true
      API.getAbnormalList().then((response) => {
          if (response.code === 200) {
            _fill('abnormalList', response.data.list)
          } else throw response.code
        })
        .finally(() => (this.loading = false))
    },
    // 获取异动类型
    getAbnormalTypes(){
      API.getAbnormalTypes({classId: this.queryForm.classId}).then(response => {
         if (response.code === 200) {
           _fill('abnormalType', response.data.list)
          } else throw response.code
      })
    },
    // 获取申请异动列表
    getApplyAbnormalList() {
      API.getApplyAbnormalList(this.queryForm).then((response) => {
          if (response.code === 200) {
            this.applyNoramls = response.data.list
            this.totalCount = response.data.total_
          } else throw response.code
        })
    },
    //申请异动
    applyAbnormal() {
      this.$router.push({
        name: 'doApplyAbnormal',
        params: {studentId: this.mockUser ? this.mockUser.uid : ''}
      })
    },
    reset() {
      this.queryForm.grade = ''
      this.queryForm.classId = ''
      this.queryForm.typeId = ''
      this.queryForm.pageNum_ = 1
      this.queryForm.pageSize_ = 20
      this.onSubmit()
    },
    isAllKeyEmpty(obj = {}) {
      return !!Object.values(obj).join('')
    },
    _fill(type, data) {
      for (const key in data) {
        this.options[type].push({
          value: key,
          label: data[key],
        })
      }
    },
    viewDetail(row) {
      this.$router.push({
        name: 'doApplyAbnormal',
        abnormalId: row.id
      })
    }
  },
  computed: {
      ...mapState({
        mockUser: state => state.session.mockUser
      })
  }
}
</script>
<style>
</style>
